<template>
  <div class="setting-container">
    <div class="setting-content">
      <div class="registerInfo">
        <div class="registerInfo-content">
          <el-form :label-position="labelPosition"
                   class="ruleForm"
                   label-width="100px"
                   :model="ruleForm"
                   :rules="rules"
                   ref="ruleForm">
            <el-form-item label="更改头像">
              <el-upload
                class="avatar-uploader-r"
                :action="domain"
                :data="qiniuToken"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <el-image
                  style="width: 100px; height: 100px;border-radius: 50%"
                  :src="ruleForm.avatar">
                  <div slot="error" class="image-slot">
                    <img style="width:100%;height:auto;" src="../../../../public/avatar.jpg" alt="">
                  </div>
                </el-image>
              </el-upload>
            </el-form-item>
            <el-form-item label="姓名">
              <el-col :span="20">
                <el-input v-model="ruleForm.real_name"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-col :span="20">
                <div class="selectSex">
                  <div class="sex">
                    <el-radio v-model="ruleForm.gender" label="男" border align="center">男</el-radio>
                  </div>
                  <div class="sex">
                    <el-radio v-model="ruleForm.gender" label="女" border align="center">女</el-radio>
                  </div>
                </div>
              </el-col>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-col :span="20">
                <el-input v-model="ruleForm.email"></el-input>
              </el-col>
            </el-form-item>
          </el-form>
          <div style="float: right;margin-right: 20px;margin-bottom: 30px;margin-top: 20px">
            <el-button class="border-btn" style="margin-left: 60px" @click="console()">取消</el-button>
            <el-button class="main-btn" type="primary" size="small" @click="submit()">确定</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {getQiniu} from "../../../api/common";
  import {getInfo, updatePerson} from "../../../api/user";
  import {IsEmailExist} from "@/api/clinicManagement";

  export default {
    name: "updateAvatar",
    data() {
      //验证邮箱
      var checkEmail = (rule, value, callback) => {
        let regEn = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
        if (!regEn.test(value)) {
          this.ruleForm.email = ''
          callback(new Error('请输入正确邮箱格式'))
        } else {
          this.disabled = false;
          this.isEmailExist(this.ruleForm.email, function (data) {
            if (data.state) {
              callback(new Error("该邮箱已注册"));
            } else {
              callback();
            }
          });
        }
      }
      return {
        domain: "http://upload.qiniu.com", // 七牛云的上传地址
        qiniuToken: {}, //上传到七牛的token
        activeName: 'first',
        labelPosition: 'right',
        ruleForm: {
          avatar: '',
          real_name: '',
          gender: '男',
          email: '',
        },
        rules: {
          email: [
            {required: false, trigger: 'blur', validator: checkEmail}
          ],
        },
        isUpdateAvatar: '',
        emailExist: '',
      };
    },
    created() {

    },
    mounted() {
      getInfo().then(res => {
        if (res.code == 200) {
          this.ruleForm.avatar = res.data.avatar
          this.ruleForm.real_name = res.data.real_name
          this.ruleForm.gender = res.data.gender
          this.ruleForm.email = res.data.email
        }
      })
    },
    computed: {},

    methods: {
      //邮箱验证
      isEmailExist(email, callback) {
        let data = {
          email: email
        }
        IsEmailExist(data).then((res) => {
          if (res.code === 200) {
            console.log(res.data)
            this.emailExist = res.data.is_exits;
            if (this.emailExist === true) {
              this.ruleForm.email = ''
              // this.disabled1 = true
            }
            callback({state: this.emailExist});
          }
        });
      },
      //取消更改
      console() {
        this.isUpdateAvatar = false
        this.$emit('updateAvatarData', this.isUpdateAvatar)
      },
      //提交修改
      submit() {
        let data = {
          real_name: this.ruleForm.real_name,
          gender: this.ruleForm.gender,
          avatar: this.ruleForm.avatar,
          email: this.ruleForm.email
        }
        updatePerson(data).then(res => {
          if (res.code == 200) {
            this.isUpdateAvatar = false
            this.$emit('updateAvatarData', this.isUpdateAvatar)
            this.$message.success('更改成功')
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      // 上传用户图像成功
      handleAvatarSuccess(res) {
        this.ruleForm.avatar = this.QINIU.qiniu_url + "/" + res.key;
      },
      beforeAvatarUpload(file) {
        const isJPGorPNG = file.type === "image/jpeg" || file.type === "image/png" || file.type === "image/png";
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPGorPNG) {
          this.$message.error("上传头像图片只能是 JPG,JPEG或PNG 格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        }
        if (isJPGorPNG && isLt2M) {
          return getQiniu().then((res) => {
            this.qiniuToken = {
              token: res.data,
            };
          });
        } else {
          return isJPGorPNG && isLt2M
        }

      },
    },
  };
</script>
<style lang="scss" scoped>
  @import "@/assets/scss/clinicManagement/modules/setting.scss";
</style>
<style>
  .el-dialog__header {
    border-bottom: 1px solid #E6E6E6;
  }

  .avatar-uploader-r .el-upload {
    /*border: 1px dashed #d9d9d9;*/
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-top: -20px;
  }

  .avatar-uploade-r .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-r-icon {
    font-size: 28px;
    color: #8c939d;
    width: 50px;
    height: 50px;
    margin-top: 10px;
    line-height: 50px;
    text-align: center;
  }

  .avatar-r {
    width: 100px;
    height: 100px;
    display: block;
    border-radius: 50px;
  }
</style>
